$(() => {
    let q = {
        //是 int 页码值
        pagenum: 1,
        //是 int 每页显示多少条数据
        pagesize: 10,
        //否 string 文章分类的 Id
        cate_id: '',
        //否 string 文章的状态， 可选值有： 已发布、 草稿
        state: ''
    }
    initArtList()

    function initArtList() {
        axios({
            url: '/my/article/list',
            params: q
        }).then(({
            data: res
        }) => {
            //成功回调
            console.log(res)
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            $('tbody').empty()
            res.data.forEach(element => {
                $('tbody').append(`
                     <tr>
                        <td><a data-id=${element.Id} href="JavaScript:;" class="link-detail">${element.title}</a></td>
                        <td>${element.cate_name}</td>
                        <td>${formatDate(element.pub_date) }</td>
                        <td>${element.state}</td>
                        <td>
                            <a href="/article/art_edit.html?Id=${element.Id}" class="layui-btn layui-btn layui-btn-xs">编辑</a>
                            <button data-Id="${element.Id}" class="layui-btn layui-btn layui-btn-xs  layui-btn-danger del-btn">删除</button>
                        </td>
                    </tr>
                `)
            });

            renderPage(res.total)
        });
    }

    // 删除
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-Id')
        layer.confirm('是否确认删除?', {
            icon: 3,
            title: '提示'
        }, function (index) {
            //do something
            axios({
                url: '/my/article/delete/' + id
            }).then(({
                data: res
            }) => {
                //成功回调
                console.log(res)
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('恭喜您删除成功!')
                if ($('.del-btn').length == 1 && q.pagenum != 0) {
                    q.pagenum--
                }
                initArtList()
            });
            layer.close(index);
        });
    })

    let form = layui.form
    initArtCateList()

    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(({
            data: res
        }) => {
            //成功回调
            if (res.status !== 0) {
                return layui.layer.msg(res.message)
            }

            res.data.forEach(element => {
                if (element.Id < 0) return
                $('[name=cate_id]').append(`
                     <option value = "${element.Id}"> ${element.name} </option>
                `)
            });
            form.render()
        });
    }

    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        initArtList()
    })

    // 分页
    function renderPage(total) {
        let laypage = layui.laypage
        //执行一个laypage实例
        laypage.render({
            elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize,
            curr: q.pagenum,
            limits: [2, 5, 10, 15, 20],
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArtList()
                }
            }
        });
    }

    $('tbody').on('click', '.link-detail', function () {
        let id = $(this).attr('data-Id')

        axios({
            url: '/my/article/' + id
        }).then(({
            data: res
        }) => {
            //成功回调
            console.log(res)
            if (res.status != 0) {
                return layer.msg(res.message)
            }

            axios({
                url: '/my/userinfo',
            }).then(({
                data: user
            }) => {
                //成功回调
                console.log(user)
                axios({
                    url: '/my/article/cates/' + res.data.cate_id
                }).then(({
                    data: cate
                }) => {
                    //成功回调
                    console.log(cate)
                    layer.open({
                        type: 1,
                        title: '预览文章',
                        area: ['1000px', '465px'],
                        content: `
                        <h1 class="artinfo-title">${res.data.title}</h1>
                        <div class="artinfo-bar">
                            <span>作者：${user.data.username}</span>
                            <span>发布时间：${formatDate( res.data.pub_date)}</span>
                            <span>所属分类：${cate.data.name}</span>
                            <span>状态：${res.data.state}</span>
                        </div>
                        <hr>
                        <img src="http://api-breakingnews-web.itheima.net${res.data.cover_img}" alt="" class="artinfo-cover">
                        <div>
                            <p>${res.data.content}</p>
                        </div>
                        `

                    })
                });


            });

        });

    })

})